<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Partiest</title>
<link href="jquery-mobile/jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link href="css/simpledialog.css" rel="stylesheet" type="text/css"/>


<script src="jquery-mobile/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script src="js/simpledialog.js" type="text/javascript"></script>
<script src="js/cordova-1.9.0.js" type="text/javascript"></script>
<script src="js/newEventFunctions.js"></script>
<script src="js/datePickerPlugin.js" type="text/javascript"></script>
<script src="js/datePickerPluginFunctions.js" type="text/javascript"></script>

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJdC3CQ8R7WRBANw0QRgQjeWQrx08p1Gc&libraries=places&sensor=true">
    </script>

<script src="js/loadingIndicator.js" type="text/javascript"></script>
<script src="js/phonegap-toast.js" type="text/javascript"></script>

<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(e){
	document.addEventListener("backbutton", onBackButton, false);
}
function onBackButton(e){
    navigator.app.backHistory();

}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 
<body>
<!--new event page-->
<div data-role="page" id="new_event">
	<div class="purple-blue-title-bar" data-role="header" data-position="fixed" data-backbtn="false">
    	<span class="ui-btn-left"><a class="goback_button" href="#" onClick="navigator.app.backHistory();"></a></span>
		<h1>New Event</h1>
	</div>
    
	<div data-role="content" data-theme="d">
		<form action="http://localhost/partyplanner/create_new_event_then_invite_friends.php" method="post" id="new_event_form">
       	  <fieldset data-role="fieldcontain">
              <label for="title">Title of Event: </label>
              <input type="text" id="title" name="title" placeholder="Eg. Amy's Birthday" />
          </fieldset>
       	  <fieldset data-role="fieldcontain">
          <div class="ui-grid-a">
          	<div class="ui-block-a" style="width:80%">
    	      <div>Location : </div>
	          <input data-inline="true" type="text" id="location" name="location" placeholder="Eg. Bill's Place, Address" />
            </div>
            <div class="ui-block-b" style="width:20%">
              <div class="center-wrapper">
              <a onClick="fill_my_location();" class="locate_me_button" style="margin-top:15px;"></a>
              </div>
            </div>
          </div>
      	  <p class="center-wrapper"> OR </p>
          <a data-role="button" href="places.html" data-ajax="false">Pick A Nearby Place</a>
	       </fieldset>
          <div class="ui-grid-a">
              <div class="ui-block-a">
	       	  <fieldset data-role="fieldcontain">
	              <label for="new_event_date">Date: </label>
    	          <input id="new_event_date" type="text" readonly class="nativedatepicker" value="" placeholder="Tap to select date" />           	  
              </fieldset>
              </div>
              <div class="ui-block-b">
       	  	  <fieldset data-role="fieldcontain">
	              <label for="new_event_time">Time: </label>
    	          <input id="new_event_time" type="text" readonly class="nativetimepicker" value="" placeholder="Tap to select time" />
              </fieldset>
              </div>
          </div>
          
       	  <fieldset data-role="fieldcontain">
              <label for="invite_friends">Invite Friends: </label>
	          <input id="invite_friends" type="text" readonly value="" placeholder="Invite Friends" />           	  
          </fieldset>
          
          <input type="submit" value="Create!" data-theme="b" onClick="presubmit();"/>
        </form>
	</div>
</div>
</body>
</html>